<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('医疗机构数量统计图')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>医疗机构数量统计图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="glyphicon glyphicon-circle-arrow-left" onclick="backinit()"></i>
                </a>
                <a class="close-link">
                    <i class="glyphicon glyphicon-remove"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts h-full" id="echarts-bar-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";

    var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
    var sid = '';
    var chartData = [];

    $(function () {

        Initialize(sid);

        barChart.on('click', function (params) {
            if (params.seriesType == 'bar') {
                // 查询 -- 只查询到区县
                if ((params.data.disId + "").length < 8) {
                    Initialize(params.data.disId);
                }
            }
        });

    });


    function Initialize(sid) {
        $.post(prefix + "/echarets/hospitalNumBarList", {
                disId: sid,
                limit:25
            }, function (res) {
                if (res.code == 0) {
                    chartData = res.rows;
                    var option = {
                        // backgroundColor: '#000000',
                        // title: {
                        //     text: '',
                        //     top: '3%',
                        //     left: '3%',
                        //     textStyle: {
                        //         fontSize: 15,
                        //         color: '#fff'
                        //     },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    show: false,
                                    fontSize: 11,
                                    backgroundColor: '#000'
                                }
                            }
                        },
                        legend: {
                            top: '3%',
                            right: '10%',
                            data: ['医疗机构数量'],
                            textStyle: {
                                color: '#000'
                            }
                        },
                        xAxis: {
                            data: chartData.map(x => {
                                return x.name
                            }),
                    axisLabel: {					//---坐标轴 标签
                        interval: 0    // 0：表示全部显示不间隔
                    },
                    axisLine: {     //标尺 横向
                        lineStyle: {
                            color: '#000'
                        }
                    }
                },//医疗机构数量统计图
                    title: {
                        text: '医疗机构数量统计图',
                            top: '3%',
                            left: '5%',
                            textStyle: {
                            fontSize: 15,
                                color: '#000'
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisLabel: {
                            formatter: '{value}个'
                        },
                        axisLine: {//标尺 竖向
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    },
                    series: [
                        {   // 条形图
                            name: '医疗机构数量',
                            type: 'bar',
                            barWidth: 15,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 5,    // 渐变
                                    label: {         // 柱顶部显示数字
                                        show: true,		//开启显示
                                        position: 'top',	//在上方显示
                                        textStyle: {	    //数值样式
                                            color: '#000',
                                            fontSize: 12
                                        }
                                    },
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#14c8d4'},
                                            {offset: 1, color: '#43eec6'}
                                        ]
                                    )
                                }
                            },
                            data: chartData
                        }
                    ]
                };

                barChart.setOption(option);
                $(window).resize(barChart.resize());
                }

            }
        );

    }



    function backinit(){
        sid = '';
        Initialize(sid);
    }


</script>
</body>
</html>